import React, { useState } from "react";
import { Cell, Image, Badge } from "react-vant";
import "../sass/my.scss";
import { FlowerO } from "@react-vant/icons";
import tou from "../images/touxiang.jpg";
import { useParams, useNavigate } from "react-router-dom";
import {
    UserCircleO,
    LikeO,
    LocationO,
    GuideO,
} from "@react-vant/icons";
function My() {
    let navigate = useNavigate();
    let xindata = [
        {
            tit: "36.00",
            hu: "账户余额",
        },
        {
            tit: 6,
            hu: "咖啡钱包",
        },
        {
            tit: 3,
            hu: "优惠券",
        },
        {
            tit: 0,
            hu: "免单卡",
        },
    ];

    return (
        <div className="my">
            <div className="nbi">
                <Badge dot>
                    <FlowerO
                        fontSize="24px"
                        color="#fff"
                        className="hua"
                    />
                </Badge>
                <div className="mtou">
                    <>
                        <Cell
                            titleClass="zi"
                            center
                            title={`天羽`}
                            labelClass="ti"
                            label="又是新的一天..."
                            icon={
                                <Image
                                    width="80"
                                    height="80"
                                    src={tou}
                                    round
                                />
                            }
                            isLink
                            size="large"
                        />
                    </>
                </div>
                <div className="bian">
                    {xindata.map((item, index) => {
                        return (
                            <div
                                className="bo-one"
                                key={index}
                            >
                                <div className="bo-ne">
                                    {item.tit}
                                </div>
                                <div className="bo-bo">
                                    {item.hu}
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
            <div className="bo">
                <div className="ge">
                    <Cell
                        title="我的订单"
                        icon={
                            <UserCircleO color="#3f45ff" />
                        }
                        isLink
                        size="large"
                        onClick={() => {
                            navigate("/dingdan");
                        }}
                    />
                    <Cell
                        title="我的收藏"
                        icon={<LikeO color="#3f45ff" />}
                        isLink
                        size="large"
                        onClick={() => {
                            navigate("/cang");
                        }}
                    />
                    <Cell
                        title="我的地址"
                        icon={<LocationO color="#3f45ff" />}
                        isLink
                        size="large"
                        onClick={() => {
                            navigate("/myaddress");
                        }}
                    />
                    <Cell
                        title="安全中心"
                        icon={<GuideO color="#3f45ff" />}
                        isLink
                        size="large"
                    />
                </div>
            </div>
        </div>
    );
}

export default My;
